<template>
	<view class="bg" @click="beatScreen">
		<view class="content">
			<view class="gongde">
				<view class="gongde_font">
					功德：
				</view>
				<view class="gongde_score">
					{{score}}
				</view>
			</view>
			<view class="gongde_add">
				<view class="gongde_add_font" :class="{'myanimationclass':upClassShow }">
					功德 +1
				</view>
			</view>
			<view class="wood_fish">
				<image id="muyu_img" :src="muyuImage" mode="" :class="{'muyu_animation': muyuChangeShow}"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				score: 0, // 功德分数
				upClassShow: false, // 功德+1上升动画的class显示与否
				muyuChangeShow: false, // 敲击木鱼时木鱼变大变小的动画的class显示与否
				muyuImage: 'http://rnjdne8hf.hn-bkt.clouddn.com/icons/muyu.png', // 木鱼图片
				innerAudio: null, // 木鱼敲击声音对象
				muyump3src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3', // 敲击木鱼声音url
			};
		},
		onLoad() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
			// 加载木鱼敲击声音的对象
			this.loadingAudio();
			setTimeout(() => {
				uni.hideLoading();
			}, 500)
			// 加载分享菜单
			this.loadingShareMenu();
		},
		methods: {
			// 点击屏幕功德+1
			beatScreen() {
				// 敲击木鱼的声音
				this.openAudioPlay();
				// 功德+1
				this.score += 1;
				// 功德 +1 在上升的同时慢慢消失
				this.upGongDeAdd();
				// 点击屏幕的时候，木鱼被敲击（木鱼图片变大之后又变回来）
				this.changeMuYuImageSize();
			},

			// 功德 +1 在上升的同时慢慢消失
			upGongDeAdd() {
				const _this = this;
				_this.upClassShow = true;
				setTimeout(() => {
					_this.upClassShow = false;
				}, 500)
			},

			// 点击屏幕的时候，木鱼被敲击（木鱼图片变大之后又变回来）
			changeMuYuImageSize() {
				const _this = this;
				_this.muyuChangeShow = true;
				setTimeout(() => {
					_this.muyuChangeShow = false;
				}, 500)
			},
			
			// 敲击木鱼的声音
			openAudioPlay(){
				if(this.innerAudio != null){
					this.innerAudio.startTime = 0;
					this.innerAudio.play();
					this.innerAudio.onPlay(()=>{
						console.log("开始播放");
					})
					this.innerAudio.onError((res)=>{
						console.log(res.errMsg);
						console.log(res.errCode);
					})
				}else{
					this.loadingAudio();
					this.innerAudio.play();
					this.innerAudio.onPlay(()=>{
						console.log("开始播放");
					})
					this.innerAudio.onError((res)=>{
						console.log(res.errMsg);
						console.log(res.errCode);
					})
				}
			},
			
			// 加载敲击木鱼声音对象
			loadingAudio(){
				this.innerAudio = uni.createInnerAudioContext();
				this.innerAudio.src = this.muyump3src;
				this.innerAudio.startTime = 0;
			},
			
			// 加载分享菜单
			loadingShareMenu() {
				wx.showShareMenu({
					withShareTicket: true,
					//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
					menus: ["shareAppMessage", "shareTimeline"]
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.bg {
		width: 100%;
		min-height: 100vh;
		background-color: #000;

		.content {
			width: 90%;
			color: #fff;
			margin: auto;

			.gongde {
				width: 350px;
				padding-top: 20px;
				display: flex;

				.gongde_font {
					font-size: 40px;
					font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
					font-weight: 700;
				}

				.gongde_score {
					font-size: 40px;
					font-weight: 700;
					color: #aaffff;
				}
			}

			.gongde_add {
				height: 150px;
				font-size: 28px;
				font-weight: 600;
				display: flex;
				align-items: flex-end;

				.gongde_add_font {
					width: 120px;
					position: absolute;
					opacity: 0;
					left: 150px;
				}

				.myanimationclass {
					animation: mymove 0.5s;
				}

				@keyframes mymove {
					from {
						top: 160px;
						opacity: 100;
					}

					to {
						top: 70px;
						opacity: 0;
					}
				}
			}

			.wood_fish {
				text-align: center;

				image {
					width: 200px;
					height: 200px;
					border-radius: 10px;
				}

				.muyu_animation {
					animation: muyu 0.3s;
				}

				@keyframes muyu {
					0% {
						width: 200px;
						height: 200px;
						border-radius: 10px;
					}

					50% {
						width: 250px;
						height: 250px;
						border-radius: 15px;
					}

					100% {
						width: 200px;
						height: 200px;
						border-radius: 10px;
					}
				}
			}
		}
	}
</style>
